<template>
  <div v-loading="pageLoad" class="padding_10">
    <div style="width: 90%; margin-left: 5%">
      <h3>{{ langs.page.member }}信息</h3>
      <el-button
        v-permissions="{ permission: ['add-member:CustomerGroup'] }"
        size="small"
        type="primary"
        @click="addUser"
      >
        添加
      </el-button>
      <el-descriptions
        v-for="(item, index) in tableData.child"
        :key="index"
        :colon="false"
        :column="5"
      >
        <el-descriptions-item
          label="姓名:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.nick_name }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="出生日期:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.birthday }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="性别:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.gender_name }}</div>
        </el-descriptions-item>

        <el-descriptions-item :label-style="{ 'font-size': '16px' }">
          <el-button
            v-permissions="{ permission: ['edit-member:CustomerGroup'] }"
            style="font-size: 16px"
            type="text"
            @click="modify(item)"
          >
            编辑
          </el-button>
          <el-button
            v-permissions="{ permission: ['delete-member:CustomerGroup'] }"
            style="font-size: 16px"
            type="text"
            @click="deleteUser(item)"
          >
            删除
          </el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="width: 90%; margin-left: 5%; padding-top: 20px">
      <h3>{{ langs.page.customer }}信息</h3>
      <el-button
        v-permissions="{ permission: ['add-customer:CustomerGroup'] }"
        size="small"
        type="primary"
        @click="addCustomer"
      >
        添加
      </el-button>
      <el-descriptions
        v-for="(item, index) in tableData.customer"
        :key="index"
        :colon="false"
        :column="5"
      >
        <el-descriptions-item
          label="姓名:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.cus_name }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="注册日期:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px, width: 200px">{{ item.created_at }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="联系方式:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.tel }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="积分:"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.tel }}</div>
        </el-descriptions-item>

        <el-descriptions-item
          :label-style="{ 'font-size': '16px', 'margin-left': '-20px' }"
        >
          <el-button
            v-permissions="{ permission: ['edit-customer:CustomerGroup'] }"
            style="font-size: 16px"
            type="text"
            @click="modifyCustomer(item)"
          >
            编辑
          </el-button>
          <el-button
            v-permissions="{ permission: ['delete-customer:CustomerGroup'] }"
            style="font-size: 16px"
            type="text"
            @click="deleteScu(item)"
          >
            删除
          </el-button>
          <el-button style="font-size: 16px" type="text" @click="getPointsList">
            积分记录
          </el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div style="width: 90%; margin-left: 5%; padding-top: 20px">
      <h3>收货地址</h3>
      <el-button
        v-permissions="{ permission: ['add-address:CustomerGroup'] }"
        size="small"
        type="primary"
        @click="addAddress"
      >
        添加
      </el-button>
      <el-descriptions
        v-for="(item, index) in tableData.address"
        :key="index"
        :colon="false"
        :column="5"
      >
        <el-descriptions-item
          label="收货人姓名"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.addressee }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="收货手机号"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">{{ item.mobile }}</div>
        </el-descriptions-item>
        <el-descriptions-item
          label="地址"
          :label-style="{ 'font-size': '16px' }"
        >
          <div style="font-size: 15px">
            {{ item.province_name }} {{ item.city_name }}
            {{ item.region_name }}
            {{ item.address }}
          </div>
        </el-descriptions-item>

        <el-descriptions-item :label-style="{ 'font-size': '16px' }">
          <el-button
            v-permissions="{ permission: ['edit-address:CustomerGroup'] }"
            style="font-size: 16px"
            type="text"
            @click="modifyAddress(item)"
          >
            编辑
          </el-button>
          <el-button
            v-permissions="{ permission: ['delete-address:CustomerGroup'] }"
            style="font-size: 16px"
            type="text"
            @click="deleteScu(item)"
          >
            删除
          </el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 家长 -->
    <el-dialog
      :before-close="handleClose"
      :title="langs.page.member"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <span>{{ langs.page.member }}姓名:</span>
        <span style="margin-left: 10px">
          <el-input
            v-model="form.nick_name"
            placeholder="请输入姓名"
            style="width: 50%"
          />
        </span>
      </div>
      <div style="margin-top: 30px">
        <span>{{ langs.page.member }}性别</span>
        <span style="margin-left: 10px">
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </span>
      </div>
      <div style="margin-top: 30px">
        <span>出生日期</span>
        <span style="margin-left: 10px">
          <el-date-picker
            v-model="form.birthday"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 孩子 -->
    <el-dialog
      :before-close="handleClose"
      :title="langs.page.customer"
      :visible.sync="dialogVisibles"
      width="30%"
    >
      <div>
        <span>{{ langs.page.customer }}姓名:</span>
        <span style="margin-left: 10px">
          <el-input
            v-model="formCustomer.cus_name"
            placeholder="请输入姓名"
            style="width: 50%"
          />
        </span>
      </div>
      <div style="margin-top: 30px">
        <span>{{ langs.page.customer }}手机号:</span>
        <span style="margin-left: 10px">
          <el-input
            v-model="formCustomer.tel"
            placeholder="请输入手机号"
            style="width: 50%"
          />
        </span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="customerSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="积分" :visible.sync="pointsDialog">
      <el-date-picker
        v-model="pointsForm.time"
        placeholder="请选择日期"
        type="date"
        value-format="yyyy-MM-dd"
        @change="getPointsList"
      />
      <el-table :data="pointTableData" style="margin-top: 10px">
        <el-table-column label="使用时间" prop="" />
        <el-table-column label="状态" prop="" />
      </el-table>
      <div slot="footer">
        <el-button type="danger" @click="pointsDialog = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :before-close="handleClose"
      title="地址编辑"
      :visible.sync="dialogVisibless"
      width="30%"
    >
      <div>
        <span>收货人姓名:</span>
        <span style="margin-left: 10px">
          <el-input
            v-model="addressForm.addressee"
            placeholder="请输入姓名"
            style="width: 50%"
          />
        </span>
      </div>
      <div style="margin-top: 30px">
        <span>收货手机号:</span>
        <span style="margin-left: 10px">
          <el-input
            v-model="addressForm.mobile"
            placeholder="请输入手机号"
            style="width: 50%"
          />
        </span>
      </div>
      <div style="margin-top: 30px">
        <span>地址:</span>
        <span style="margin-left: 50px">
          <el-cascader
            v-model="baddress"
            :props="props"
            @change="cascaderChange"
          />
        </span>
      </div>
      <div style="margin-top: 30px">
        <span>详细地址:</span>
        <span style="margin-left: 20px">
          <el-input
            v-model="addressForm.address"
            placeholder="请输入详细地址"
            style="width: 50%"
          />
        </span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibless = false">取 消</el-button>
        <el-button type="primary" @click="addressSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <div style="width: 80%; margin-left: 40%">
      <el-button @click="goBack()">返回</el-button>
    </div>
  </div>
</template>

<script>
  import {
    cusGroupDetail,
    cusUserDel,
    cusChildAdd,
    cusUserAdd,
    cusChildDel,
    getArea,
    groupAddressAdd,
  } from '@/api/level'
  export default {
    props: {
      id: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        pageLoad: false,
        langs: JSON.parse(window.localStorage.getItem('lang')),
        tableData: {},
        dialogVisible: false,
        dialogVisibles: false,
        dialogVisibless: false,
        pointsDialog: false, // 积分dialog
        pointsForm: {
          page: 1,
          time: '',
        },
        pointTableData: [], // 积分列表
        userTableData: {},
        baddress: 'sdasd asd',
        form: {
          nick_name: '',
          gender: '',
          birthday: '',
        },
        formCustomer: {
          cus_name: '',
          tel: '',
        },
        addressForm: {
          mobile: '',
          addressee: '',
          address: '',
        },
        options: [
          {
            value: 'male',
            lable: '男',
          },
          {
            value: 'female',
            lable: '女',
          },
        ],
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const params = {
              pid: 0,
            }
            params.pid = node.value
            getArea(params).then((res) => {
              const arr = []
              res.data.forEach((e) => {
                arr.push({
                  value: e.id,
                  label: e.name,
                  leaf: e.level >= 3,
                })
              })
              resolve(arr)
            })
          },
        },
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      // 初始化 方法
      init() {
        this.pageLoad = true
        const params = {
          group_id: this.id,
        }
        cusGroupDetail(params).then((res) => {
          this.tableData = res.data
          this.pageLoad = false
        })
      },
      addUser() {
        this.form = {
          nick_name: '',
          gender: '',
          birthday: '',
        }
        this.dialogVisible = true
      },
      addCustomer() {
        this.formCustomer = {
          cus_name: '',
          tel: '',
        }
        this.dialogVisibles = true
      },
      addAddress() {
        this.addressForm = {
          mobile: '',
          addressee: '',
          address: '',
        }
        this.dialogVisibless = true
      },
      // 用户编辑按钮
      modify(e) {
        this.form.nick_name = e.nick_name
        this.form.gender = e.gender
        this.form.birthday = e.birthday
        this.form.id = e.id
        this.dialogVisible = true
        this.userTableData = e
      },
      // 客户
      modifyCustomer(e) {
        this.formCustomer.id = e.id
        this.formCustomer.cus_name = e.cus_name
        this.formCustomer.tel = e.tel
        this.dialogVisibles = true
      },
      // 积分
      getPointsList() {
        // 调用接口获取积分列表
        // const loading = this.$loading({
        //   lock: true,
        //   target:
        //     this.pointTableData.length == 0
        //       ? '.el-table__empty-block'
        //       : '.el-table__body',
        // })
        this.pointsDialog = true

        // loading.close()
      },
      // 地址
      modifyAddress(e) {
        this.addressForm.id = e.id
        this.addressForm.address = e.address
        this.addressForm.mobile = e.mobile
        this.addressForm.addressee = e.addressee
        this.baddress = e.province_name + e.city_name + e.region_name
        this.dialogVisibless = true
      },
      // 地址，下拉框
      cascaderChange(e) {
        const province_code = e[0]
        const city_code = e[1]
        const area_code = e[2]
        this.addressForm.province_id = province_code
        this.addressForm.city_id = city_code
        this.addressForm.region_id = area_code
      },
      // 删除客户
      deleteScu(e) {
        const params = {
          id: e.id,
        }
        cusUserDel(params).then(() => {
          this.init()
        })
      },
      // 删除用户
      deleteUser(e) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const params = {
              id: e.id,
            }
            cusChildDel(params).then(() => {
              this.init()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      // 用户提交方法
      userSubmit() {
        this.form.group_id = this.id
        cusChildAdd(this.form)
          .then(() => {
            this.dialogVisible = false
            this.init()
            this.$message({
              message: '成功',
              type: 'success',
            })
            this.form = {
              name: '',
              gender: '',
              birthday: '',
              id: '',
            }
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      // 客户添加
      customerSubmit() {
        this.formCustomer.group_id = this.id
        cusUserAdd(this.formCustomer)
          .then(() => {
            this.dialogVisibles = false
            this.init()
            this.formCustomer = {
              cus_name: '',
              tel: '',
              id: '',
            }
            this.$message({
              message: '成功',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      addressSubmit() {
        this.addressForm.group_id = this.id
        groupAddressAdd(this.addressForm)
          .then(() => {
            this.dialogVisibless = false
            this.init()
            this.$message({
              message: '成功',
              type: 'success',
            })
            this.baddress = ''
            this.addressForm = {
              mobile: '',
              addressee: '',
              address: '',
              id: '',
            }
          })
          .catch(() => {
            this.$message.error('失败')
          })
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      // 弹框的回调
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
            this.form = { name: '', gender: '', birthday: '' }
          })
          .catch(() => {})
      },
    },
  }
</script>

<style scoped>
  h3 {
    border-left: 3px solid dodgerblue;
    padding-left: 7px;
  }
</style>
